<template>
  <div class="edit-item">
    <div class="edit-item_label" :style="labelStyle">
      <table-ellipsis :tableEllipsisIsTurnLine="labelLineBreak" :text="label" v-if="label"/>
      <slot name="label" v-else/>
    </div>
    <div :class="[setContentWidth?'edit-item_content_setted':'edit-item_content']" :style="{'font-size':fontSize}">
      <table-ellipsis :tableEllipsisIsTurnLine="false" :text="content" v-if="content"/>
      <slot v-else/>
    </div>
  </div>
</template>

<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
export default {
  components: {
    tableEllipsis
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    textAlign: {
      type: String,
      default: 'left',
      validator: (val) => ['left', 'center', 'right'].includes(val)
    },
    labelWidth: {
      type: [Number, String],
      default: 80
    },
    fontSize: {
      type: [String],
      default: '1.4rem'
    },
    maxWidth: {
      type: [Number, String],
      default: 140
    },
    content: {
      type: [String, Number],
      default: ''
    },
    labelLineBreak: {
      type: [Boolean],
      default: false
    },
    setContentWidth: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
    labelStyle () {
      let width;
      if (!this.labelWidth) {
        width = 'auto';
      }else{
        if (typeof this.labelWidth === 'number') {
          width = `${this.labelWidth}px`;
        }else if (this.labelWidth.indexOf('%') > 0 || this.labelWidth.indexOf("px") > 0 || this.labelWidth.indexOf("calc") > 0) {
          width = this.labelWidth;
        } else {
          width = `${this.labelWidth}px`;
        }
      }
      return {
        width: width,
        'font-size': this.fontSize,
        textAlign: this.textAlign,
        maxWidth: `${this.maxWidth}px`
      }
    }
  }
}

</script>

  <style scoped lang="less">
    .edit-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 34px;
      .edit-item_content {
        flex: 1 0 0;
        margin-left:8px;
        white-space: normal;
      }
      .edit-item_content_setted {
        width: calc(100% - 140px);
        flex: 1 0 0;
        margin-left:8px;
        white-space: normal;
      }

      & + .edit-item {
        margin-top: 12px;
      }
    }
  </style>
